<template>
    <transition
            name="tran_rank"
            enter-active-class="animated fadeIn"
            leave-active-class="animated fadeOut"
    >
    <div class="blog" v-if="show">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div class="blog-title typo-PingFang">{{blog.title}}</div>
                <div class="blog-tags">
                    <a><i class="el-icon-date"></i><span class="blog-tag">{{blog.created_at}}</span></a>
                    <a><i class="el-icon-view"></i><span class="blog-tag">{{blog.meta.views}}</span></a>
                </div>
            </div>
            <div class="text item" v-html="content">
            </div>
        </el-card>
    </div>
    </transition>
</template>

<script>
    import {log} from '@/assets/js/util.js'
    export default{
        props:['postId'],
        name: 'blog',
        data () {
            return {
                msg: 'postId',
                content:'',
                show:false,
                blog:null,
            }
        },
        methods:{
            init:function () {
                let url = server_url+'/api/article?id='+this.postId
                this.$http.jsonp(url, {}, {
                    headers: {},
                    emulateJSON: true
                }).then(function(response) {
                    let data = response.data.data
                    this.blog = data
                    this.content = data.content
                    this.show = true
                }, function(response) {
                    log(response)
                });
            }
        },
        mounted: function() {
            this.init()

        },
    }
</script>

<style>
    .title{
        margin: 0 auto;
    }
    .blog-title{
        text-align: center;
        font-size: 20px;
        font-weight: 500;
    }
    .blog-tag{
        font-size: 14px;
        margin-left: 5px;
    }
    .blog-tags{
        margin-top: 5px;
        text-align: center;
    }
    .text-input{
        margin-top: 15px;
    }
    .comment-btn{
        margin-top: 15px;
    }
</style>